<template>
	<view>
		<view style="height: 6vh;">
			<u-navbar :isBack="false" :height="120" title="數據分析" :titleSize="60" title-color="#FFF" :background="{background:'linear-gradient(45deg, #0856e7,#42bdf9)'}" ></u-navbar>
		</view>
		
		<titleBox title="2月耗电比">
			<view style="height: 30vh;">
				<qiun-data-charts type="column" :opts="columnOptions" :chartData="twoData" :ontouch="true">
				</qiun-data-charts>
			</view>
		</titleBox>
		<titleBox title="6月耗电比例">
			<view style="height: 30vh;">
				<qiun-data-charts type="column" :opts="columnOptions" :chartData="sixData" :ontouch="true">
				</qiun-data-charts>
			</view>
		</titleBox>

		<titleBox title="2023年 上半年耗电分析">
			<view style="height: 30vh;">
				<qiun-data-charts type="line" :chartData="lineData"></qiun-data-charts>
			</view>
		</titleBox>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				twoData: {
					categories: []
					, series: [{
						name: "耗电比例"
						, data: []
					}]
				}
				, sixData: {
					categories: []
					, series: [{
						name: "耗电比例"
						, data: []
					}]
				}
				,lineData:{
					categories:[],
					series:[]
				}
				, columnOptions: {
					fontSize: 30
					, lineHeight: 200
					, enableScroll: true
					, padding: [100, 0, 100, 0]
					, legend: {
						show: false
					}
					, xAxis: {
						itemCount: 4
						, fontSize: 30
						, marginTop: 100
						, scrollShow: true
					}
					, yAxis: {
						showTitle: true
						, data: [{
							title: "每小时耗电量"
							, titleOffsetY: -20
						}]
					}
				}
			}
		}
		, methods: {
			parseRechargeData(x) {
				// 获取充电开始时间
				let createTime = new Date(x.createTime)
				let startTime = new Date(x.beginTime)
				let endTime = new Date(x.endTime)
				let differenceDate = new Date(endTime - startTime)
				let differenceHours = differenceDate.getHours();
				let differenceMinute = differenceDate.getMinutes();
				let ratio = (x.chargedQuantity / (((differenceHours * 60) + differenceMinute) / 60)).toFixed(1)
				return {
					label: String(createTime.getDate())
					, value: ratio
				}
			}
		}
		, onLoad() {
			this.$u.api.get_rechargeList({
				createTimeStartMonth: '202302'
				, createTimeEndMonth: '202302'
			}).then(res => {
				let formatResult = [];
				res.data.forEach(x => {
					formatResult.push(this.parseRechargeData(x))
				});
				formatResult = formatResult.sort(function(a, b) {
					return a.label - b.label;
				})
				formatResult.forEach(x => {
					this.twoData.categories.push(x.label);
					this.twoData.series[0].data.push(Number(x.value))
				})
			})

			this.$u.api.get_rechargeList({
				createTimeStartMonth: '202306'
				, createTimeEndMonth: '202306'
			}).then(res => {
				let formatResult = [];
				res.data.forEach(x => {
					formatResult.push(this.parseRechargeData(x))
				});
				formatResult = formatResult.sort(function(a, b) {
					return a.label - b.label;
				})
				formatResult.forEach(x => {
					this.sixData.categories.push(x.label);
					this.sixData.series[0].data.push(Number(x.value))
				})
			})

			let recharge_1_6_Promise = this.$u.api.get_rechargeList({
				createTimeStartMonth: '202301'
				, createTimeEndMonth: '202306'
			})
			let get_mileage_Promise = this.$u.api.get_mileage({
				"carId": 1
				, "createTimeStartMonth": 202301
				, "createTimeEndMonth": 202306
			})
			Promise.all([recharge_1_6_Promise, get_mileage_Promise]).then(res => {
				let promiseAResult = [];
				let promiseResult_B = [];
				res[0].data.forEach(x => {
					let itemMonth = new Date(x.createTime).getMonth() + 1;
					// console.log(itemMonth);
					let isExists = promiseAResult.some(i => i.month == itemMonth);
					if (!isExists) {
						promiseAResult.push({
							month: itemMonth
							, data: [x]
						})
					} else {
						// console.log(`X.Month ${itemMonth} `);
						promiseAResult.forEach(j => {
							if (j.month == itemMonth) {
								j.data.push(x)
							}
						})
					}
				})

				res[1].data.forEach(x => {
					let itemMonth = new Date(x.createTime).getMonth() + 1;
					// console.log(itemMonth);
					let isExists = promiseResult_B.some(i => i.month == itemMonth);
					if (!isExists) {
						promiseResult_B.push({
							month: itemMonth
							, data: [x]
						})
					} else {
						// console.log(`X.Month ${itemMonth} `);
						promiseResult_B.forEach(j => {
							if (j.month == itemMonth) {
								j.data.push(x)
							}
						})
					}
				})
				promiseAResult.reverse()
				promiseResult_B.reverse()
				this.lineData.categories = ['1月','2月','3月','4月','5月','6月']
				this.lineData.series = [{
					name:"耗电量",data:[]
				},{
					name:'行驶里程',data:[]
				},{
					name:'百公里耗电',data:[]
				}]
				promiseAResult.forEach((x,index) =>{
					let mileageObject = promiseResult_B[index];
					let charge_power = 0;
					let run_distance = 0;
					let hundred_charge_power = 0;
					x.data.forEach(i =>{
						charge_power += i.chargedQuantity;
					})
					mileageObject.data.forEach( k =>{
						run_distance += k.carMileage;
					})
					
					hundred_charge_power = charge_power / run_distance * 100;
					
					charge_power.toFixed(1)
					run_distance.toFixed(1)
					hundred_charge_power.toFixed(1)
					this.lineData.series[0].data.push(charge_power);
					this.lineData.series[1].data.push(run_distance);
					this.lineData.series[2].data.push(hundred_charge_power);
					
					
					// this.lineData.series[0].data.push()
					
				})

			})
		}
	}
</script>

<style>

</style>
